<template>
<div>
  <mt-header :title="$route.meta.title" v-if="showTitle" fixed>
      <a slot="left" >
        <mt-button icon="back" @click.native="go()">返回</mt-button>
      </a>
    </mt-header>
    <div class="chou-jiang">
      <span class="choujiang-num">剩余抽奖次数：<span>{{num}}</span> 次</span>
      <div id="rotary-table">
        <div class="award" v-for="(award,index) in awards" :key="index" :class="['award'+index,{'active': index==current}]">
          <img :src="award.img" alt="">
          <span>{{award.name}}</span>
        </div>
        <div id="start-btn" @click="start">
          <img src="../../../static/imgs/start.png" alt="">
        </div>
      </div>
      <span class="tips">活动规则：<br/>绑定完身份证及淘宝账号且审核通过即可开启转盘！</span>
    </div>
</div>
</template>
<script>
import {Toast} from 'mint-ui';
import Loading from '@/components/base/loading/Loading.vue'
import {userService} from '#/service'
export default {
  name: "raffle",
  data() {
    return {
      num: 0,
      selected: "1",
      ignoreTitle: ["login"],
      current: 0,
      myAwards: {},
      awards: [
        { id: 1, name: "小礼品", img: '../../../static/imgs/liping.png' },
        { id: 2, name: "小红包", img: '../../../static/imgs/hongbao.png' },
        { id: 3, name: "小礼品", img: '../../../static/imgs/liping.png' },
        { id: 4, name: "一年会员", img: '../../../static/imgs/huiyuan.png' },
        { id: 5, name: "小红包", img: '../../../static/imgs/hongbao.png' },
        { id: 6, name: "小礼品", img: '../../../static/imgs/liping.png' },
        { id: 7, name: "小红包", img: '../../../static/imgs/liping.png' },
        { id: 8, name: "一年会员", img: '../../../static/imgs/huiyuan.png' }
      ],
      speed: 200,
      diff: 15,
      award: {},
      time: 0
    };
  },
  computed: {
    showTitle() {
      return !this.ignoreTitle.includes(this.$route.name);
    }
  },
  created () {
    this.getLotteryList()
  },
  methods: {
    go() {
      this.$router.go(-1);
    },
    getLotteryList() {
      let num = 0
      this.$nextTick(async () => {
          let res = await userService.lotteryList({
            data:{
              lolotteryId: ''
            }
          })
          if(res.data && res.data.length > 0){
            for (let i = 0; i < res.data.length; i++) {
              const { type, id } = res.data[i]
              if (type === 2) {
                num++;
              }
            }
          }
          this.num = num;
        })
    },
    initLottery () {
      this.$nextTick(async () => {
        let res = await userService.getLottery({
          params:{
            lotteryId: this.$route.query.id
          }
        })
        if(res.data){
          let arr = [1, 3, 6, 4, 8, 2, 5, 7]
          if (res.data.indexOf('礼品')!==-1) {
            // 1 3 6
            const n = Math.floor(Math.random()*2+0);
            this.myAwards = { id: arr[n], name: '小礼品' }
          }
          if (res.data.indexOf('会员')!==-1) {
            // 4 8
            const n = Math.floor(Math.random()*4+3);
            this.myAwards = { id: arr[n], name: '一年会员' }
          }
          if (res.data.indexOf('红包')!==-1) {
            // 2 5 7
            const n = Math.floor(Math.random()*7+5);
            this.myAwards = { id: arr[n], name: '小红包' }
          }
          if (this.myAwards.id) {
            this.drawAward();
            this.time = Date.now();
            this.speed = 200;
            this.diff = 15;
          }
        }
      })
    },
    start() {
      if (this.num === 0) {
        Toast({
          message: '您当前可抽奖的次数为0',
          position: 'top'
        });
      } else {
        this.initLottery()
      }
    },
    drawAward() {
      // 请求接口, 这里我就模拟请求后的数据(请求时间为2s)
      setTimeout(() => {
        this.award = this.myAwards
      }, 1000);
      this.move();
    },
    move() {
      window.timeout = setTimeout(() => {
        this.current++;
        if (this.current > 7) {
          this.current = 0;
        }
        if (this.award.id && (Date.now() - this.time) / 1000 > 2) {
          this.speed += this.diff;
          if (
            (Date.now() - this.time) / 1000 > 4 &&
            this.award.id == this.awards[this.current].id
          ) {
            clearTimeout(window.timeout);
            setTimeout(() => {
              Toast({
                message: `恭喜你，抽中了${this.award.name}`,
                position: 'top'
              });
              this.getLotteryList()
            }, 0);
            return;
          }
        } else {
          this.speed -= this.diff;
        }
        this.move();
      }, this.speed);
    }
  }
};
</script>

<style lang="less">
* {
  margin: 0;
  padding: 0;
  list-style: none;
  outline: none;
}
.chou-jiang {
  position: fixed;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background:url('../../../static/imgs/choujiang.jpg') no-repeat;
  background-size:100% 100%;
  .choujiang-num {
    position: absolute;
    right: 5px;
    top: 95px;
    font-size: 14px;
    font-weight: bold;
    color: #ffffff;
    span {
      color: yellowgreen;
    }
  }
  .tips {
    font-size: 12px;
    font-weight: bold;
    color: #ffffff;
    line-height: 0.2rem;
  }
}
#rotary-table {
  margin-top: 0.5rem;
  width: 340px;
  height: 349px;
  position: relative;
  font-size: 12px;
  .award {
    border-radius: 10px;
    width: 90px;
    height: 96px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-around;
    float: left;
    position: absolute;
    overflow: hidden;
    font-size: 14px;
    color: #666666;
    background-color: #ffffff;
    img {
      width: 50px;
      height: 50px;
    }
    &.active {
      background-color: darkgoldenrod;
      color: #ffffff;
    }
    &.award0 {
      top: 21px;
      left: 21px;
    }
    &.award1 {
      top: 21px;
      left: 125px;
    }
    &.award2 {
      top: 21px;
      right: 22px;
    }
    &.award3 {
      top: 126px;
      right: 22px;
    }
    &.award4 {
      bottom: 22.5px;
      right: 22px;
    }
    &.award5 {
      bottom: 22.5px;
      right: 125.5px;
    }
    &.award6 {
      bottom: 22.5px;
      left: 21px;
    }
    &.award7 {
      top: 126px;
      left: 21px;
    }
  }
  #start-btn {
    border-radius: 10px;
    position: absolute;
    top: 125px;
    left: 124px;
    width: 90px;
    height: 96px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-around;
    background-color: #ffffff;
    color: #ffffff;
    font-size: 14px;
    font-weight: bold;
    img {
      width: 50px;
      height: 50px;
    }
  }
}
</style>
